<template>
  <div class="InvoiceIdentification">
    <img src="../assets/logo.png" alt="">
    <div class="itemList">
      <p class="item">
        <span>金额</span>
        <span>￥{{data.invoiceAmount}}</span>
      </p>
      <p class="item">
        <span>税额</span>
        <span>￥{{data.taxAmount}}</span>
      </p>
      <p class="item">
        <span>税价合计</span>
        <span class="black" style="font-size:14px">￥{{data.totalAmount}}</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>发票代码</span>
        <span>{{data.invoiceCode}}</span>
      </p>
      <p class="item">
        <span>开票号码</span>
        <span>{{data.invoiceNo}}</span>
      </p>
      <p class="item">
        <span>开票日期</span>
        <span>{{data.invoiceDate}}</span>
      </p>
      <p class="item">
        <span>效验码</span>
        <span>{{data.checkCode}}</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>购买方</span>
        <span class="black">{{data.buyerName}}</span>
      </p>
      <p class="item">
        <span>纳税人识别号</span>
        <span class="black">{{data.buyerTaxNo}}</span>
      </p>
      <p class="item">
        <span>地址、电话</span>
        <span>{{data.buyerAddressPhone}}</span>
      </p>
      <p class="item">
        <span>开户行及电话</span>
        <span>{{data.buyerAcount}}</span>
      </p>
    </div>

    <div class="itemList">
      <p class="item">
        <span>销售方</span>
        <span class="black">{{data.salerName}}</span>
      </p>
      <p class="item">
        <span>纳税人识别号</span>
        <span class="black">{{data.salerTaxNo}}</span>
      </p>
      <p class="item">
        <span>地址、电话</span>
        <span>{{data.salerAddressPhone}}</span>
      </p>
      <p class="item">
        <span>开户行及电话</span>
        <span>{{data.salerAcount}}</span>
      </p>
    </div>

    <div class="itemList">
      <ul>
        <li>
          <div class="liMain">
            <p>货物或应税劳务、服务</p>
          </div>
          <div>
            <p>金额</p>
          </div>
          <div>
            <p>税率</p>
          </div>
          <div>
            <p>税额</p>
          </div>
        </li>
        <li v-for="(item,index) in data.jxfpDetailses.length" :key="index">
          <div class="liMain">
            <p class="black">{{data.jxfpDetailses[index].goodsName}}</p>
          </div>
          <div>
            <p class="black">￥{{data.jxfpDetailses[index].detailAmount}}</p>
          </div>
          <div>
            <p class="black">{{data.jxfpDetailses[index].taxRate}}</p>
          </div>
          <div>
            <p class="black">￥{{data.jxfpDetailses[index].taxAmount}}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="itemList lastItem">
      <p class="item">
        <span class="black">摘要</span>
        <span class="black">{{data.remark}}</span>
      </p>
    </div>
      
    <div class="button">
      <mt-button type="primary" size="small" @click="sureUpload">确认上传</mt-button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import { Button, Toast } from 'mint-ui';
	import Bus from '@/bus.js'

  export default {
    data () {
      return {
        data:{},
        invoiceData:{
          apiType: "CYFP",
          blueInvoiceCode: "",
          blueInvoiceNo: "",
          buyerAcount: "",                             //购方开户行及账号
          buyerAddressPhone: "",                      //购方地址、电话
          buyerName: "深圳爱校信息技术有限公司",     //购方名称
          buyerTaxNo: "91440300359819522L",          //购方税号 现在是 15/18 位
          cancellationMark: "N",
          checkCode: "49094899323312482677",       //校验码
          checkCount: "1",
          createAt: "2018-08-29 11:41:02",
          currentTaxPeriod: "",
          drawer: "",
          id: "146",
          invoiceAmount: "106.83",
          invoiceCode: "035021700111",           //发票代码 10 或 12 位
          invoiceDate: "20180302",               //开票日期 yyyyMMdd
          invoiceNo: "26891469",                //发票号码 8 位
          invoiceStatus: "",
          invoiceType: "10",
          jxfpDetailses: [ {
              detailAmount: "-11.97",          //金额 
              detailNo: "2",
              goodsName: "44444",                  //货物名称
              goodsNum: "",
              id: "238",
              lx: "",
              num: "0",                       //数量
              removeStatus: "0",
              specificationModel: "",         //规格型号 
              taxAmount: "-2.03",             //税额 
              taxDetailAmount: "",            
              taxRate: "17%",                 //税率 正数如税率 17%，填写 17
              taxUnitPrice: "",
              txrqq: "",
              txrqz: "",
              unit: "",                      //计量单位 
              unitPrice: "0"                 //不含税单价
            },{
              detailAmount: "-11.97",          //金额 
              detailNo: "2",
              goodsName: "22222",                  //货物名称
              goodsNum: "",
              id: "238",
              lx: "",
              num: "0",                       //数量
              removeStatus: "0",
              specificationModel: "",         //规格型号 
              taxAmount: "-2.03",             //税额 
              taxDetailAmount: "",            
              taxRate: "15%",                 //税率 正数如税率 17%，填写 17
              taxUnitPrice: "",
              txrqq: "",
              txrqz: "",
              unit: "",                      //计量单位 
              unitPrice: "0"                 //不含税单价
            } ],
          machineNo: "661620001408",
          payee: "",
          remark: "订单号:72648287785,",                //备注
          salerAcount: "",                              //销方开户行及账号
          salerAddressPhone: "",                        //销方地址、电话
          salerName: "厦门京东东和贸易有限公司",        //销方名称
          salerTaxNo: "91350212MA34A9L25L",             //销方税号 真实税号是 15/18 位
          sfdbts: "",
          taxAmount: "18.17",
          totalAmount: "125.00",            },
      }
    },
    created(){
      Bus.$on('invoiceDataVal',(msg) => {
         this.data = msg
      });
      setTimeout(() => {
        console.log(this.data);
      }, 3000);
    },
    beforeDestroy () {
  		bus.$off('invoiceDataVal',this.data);
		},
    methods:{
      sureUpload(){ //确认上传
        Toast({
          message: '上传成功',
          // iconClass: 'icon icon-success',
          duration: 1000
        });
      }
    },
  };
</script>

<style lang="less" scoped>
  p,ul{
    margin: 0;
    padding: 0;
  }
  li {
    list-style: none;
  }
  .InvoiceIdentification{
    color: rgba(171, 171, 171, 1);
    font-size: 12px;
    font-family: Arial;
    padding: 0px 8px;
    padding-bottom: 50px;
  }
  img{
    width: 163px;
    margin: 0 auto;
    height: 40px;
    background-color: #eee;
    margin-bottom: 8px;
  }
  .item{
    display: flex;
    justify-content: space-between;
    height: 25px;
    line-height: 25px;
  }
  .itemList{
    border-bottom: solid 1px #D4D4D4;
    padding: 8px 0px;
  }

  .lastItem{
    border-bottom: none;
    .item{
      height: 30px;
      line-height: 30px;
    }
  }

  .black{
    color: #101010;
  }

  ul{
    padding: 9px 0px;
    li{
      display: flex;
      div{
        flex: 1;
        p{
          height: 23px;
          line-height: 23px;
        }
      }
    }
    .liMain{
      min-width: 121px;
    }
  }

  .button{
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 95%;
    margin: 0 auto;
    padding-bottom: 8px;
    padding-top: 8px;
    background-color: #fff;
    .mint-button{
      width: 90%;
      margin: 0 auto;
    }
  }
</style>
